<template>
  <div>
    <h3>Slot</h3>
    <Child :persons="persons">
      <!-- 直接这样写就是默认插槽 -->
      <div>hello world</div>
      <template #one>
        <div>
          <h3>具名插槽</h3>
          <p>我是one的具名插槽</p>
        </div>
      </template>
      <template #two>
        <div>
          <h3>具名插槽</h3>
          <p>我是two的具名插槽</p>
        </div>
      </template>
      <!-- obj是传来值组件的对象 通过{}结构拿到值 -->
      <template #three="{ item }">
        <div :style="{ background: item.age > 20 ? 'red' : '' }">
          用户的名字是:{{ item.name }}年龄是:{{ item.age }}
        </div>
      </template>
    </Child>
  </div>
</template>

<script>
import Child from "./Child.vue";
export default {
  name: "Slot",
  components: {
    Child,
  },
  data() {
    return {
      persons: [
        { id: "001", name: "李博", age: 30 },
        { id: "002", name: "red青", age: 14 },
        { id: "003", name: "(个_个)", age: 24 },
        { id: "004", name: "lucy", age: 55 },
        { id: "005", name: "lily", age: 4 },
        { id: "006", name: "liming", age: 19 },
      ],
    };
  },
};
</script>

<style>
</style>